<!--<script setup lang="ts">-->
<!--import HelloWorld from './components/HelloWorld.vue'-->
<!--import TheWelcome from './components/TheWelcome.vue'-->
<!--</script>-->

<!--全局注册-->
<!--展示模板-->
<template>
  <img src="./assets/logo.png" alt="Vue logo">
  <HelloWorld msg="欢迎来到菜鸟教程!"/>
  <div id="app">
    <ul>
      <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" @delete-todo="removeTodo" @edit-todo="editTodo"></todo-item>
    </ul>
  </div>
</template>
<!--Vue 代码-->
<script>
// 从 src/components/HelloWorld.vue 导入 HelloWorld 组件
import HelloWorld from "../src/components/HelloWorld.vue"
import TodoItem from "../src/components/TodoItem.vue";


Vue.component('todo-item', TodoItem);

new Vue({
  el: '#app',
  components: {
    'todo-item': TodoItem
  },
  data: {
    todos: [
      { id: 1, text: 'Learn Vue.js' },
      { id: 2, text: 'Build a project' }
    ]
  },
  methods: {
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    editTodo(id) {
      // Implement editing logic here
    }
  }
});

export default {
  name: "App",
  components: {
    TodoItem,
    HelloWorld
  }
}
</script>

<!--<template>-->
<!--  <header>-->
<!--    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />-->

<!--    <div class="wrapper">-->
<!--      <HelloWorld msg="You did it!" />-->
<!--    </div>-->
<!--  </header>-->

<!--  <main>-->
<!--    <TheWelcome />-->
<!--  </main>-->
<!--</template>-->

<!--<style scoped>-->
<!--header {-->
<!--  line-height: 1.5;-->
<!--}-->

<!--.logo {-->
<!--  display: block;-->
<!--  margin: 0 auto 2rem;-->
<!--}-->

<!--@media (min-width: 1024px) {-->
<!--  header {-->
<!--    display: flex;-->
<!--    place-items: center;-->
<!--    padding-right: calc(var(&#45;&#45;section-gap) / 2);-->
<!--  }-->

<!--  .logo {-->
<!--    margin: 0 2rem 0 0;-->
<!--  }-->

<!--  header .wrapper {-->
<!--    display: flex;-->
<!--    place-items: flex-start;-->
<!--    flex-wrap: wrap;-->
<!--  }-->
<!--}-->
<!--</style>-->
